<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>个人安全</title>
    <script src="resources/js/jquery-3.7.1.min.js"></script>
    <style>
        .main {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .section {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            background-color: #fafafa;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .section-content {
            flex: 1;
            margin-right: 20px;
        }
        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        .section-description {
            font-size: 14px;
            color: #666;
        }
        .section-button {
            background-color: #1890ff;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            white-space: nowrap; /* 防止按钮文字换行 */
        }
        .section-button:hover {
            background-color: #40a9ff;
        }

        /* 弹窗样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            width: 300px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .modal-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .modal-input {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
        }
        .modal-buttons {
            display: flex;
            justify-content: flex-end;
        }
        .modal-button {
            background-color: #1890ff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
        }
        .modal-button.cancel {
            background-color: #ccc;
        }
    </style>
</head>
<body>

<div class="main">
    <!-- 登录密码 -->
    <div class="section">
        <div class="section-content">
            <div class="section-title">登录密码</div>
            <div class="section-description">
                建议您定期更改密码以保护账户安全
            </div>
        </div>
        <button class="section-button" onclick="openModal('password')">修改</button>
    </div>

    <!-- 手机核验 -->
    <div class="section">
        <div class="section-content">
            <div class="section-title">手机核验</div>
            <div class="section-description">
                使用手机接收铁路客户服务信息
            </div>
        </div>
        <button class="section-button" onclick="openModal('phone')">修改</button>
    </div>

    <!-- 安全邮箱 -->
    <div class="section">
        <div class="section-content">
            <div class="section-title">安全邮箱</div>
            <div class="section-description">
                使用邮箱接收铁路客户服务信息
            </div>
        </div>
        <button class="section-button"  onclick="openModal('email')">修改</button>
    </div>

    <!-- 优惠券 -->
    <div class="section">
        <div class="section-content">
            <div class="section-title">优惠(待)类型</div>
            <div class="section-description">
                设置优惠(待)类型
            </div>
        </div>
        <button class="section-button" onclick="openModal('coupon')">修改</button>
    </div>
</div>

<!-- 弹窗 -->
<div id="modal" class="modal">
    <div class="modal-content">
        <div class="modal-title" id="modal-title">修改信息</div>
        <!-- 输入框或下拉框 -->
        <div id="modal-input-container">
            <input type="text" id="modal-input-new" class="modal-input" placeholder="请输入新信息">
            <select id="modal-select-coupon" class="modal-input" style="display: none;">
                <option value="成人">成人</option>
                <option value="儿童">儿童</option>
                <option value="学生">学生</option>
                <option value="残疾军人">残疾军人</option>
            </select>
        </div>
        <div class="modal-buttons">
            <button class="modal-button cancel" onclick="closeModal()">取消</button>
            <button class="modal-button" onclick="submitForm()">确认</button>
        </div>
    </div>
</div>

<script>
    let currentType = ''; // 当前修改的类型

    // 打开弹窗
    function openModal(type) {
        currentType = type;
        const modal = document.getElementById('modal');
        const modalTitle = document.getElementById('modal-title');
        const modalInputNew = document.getElementById('modal-input-new');
        const modalSelectCoupon = document.getElementById('modal-select-coupon');

        // 隐藏所有输入框和下拉框
        modalInputNew.style.display = 'none';
        modalSelectCoupon.style.display = 'none';

        // 根据类型设置弹窗标题和输入框提示
        switch (type) {
            case 'password':
                modalTitle.textContent = '修改登录密码';
                modalInputNew.placeholder = '请输入新密码';
                modalInputNew.style.display = 'block';
                break;
            case 'phone':
                modalTitle.textContent = '修改手机号码';
                modalInputNew.placeholder = '请输入新手机号码';
                modalInputNew.style.display = 'block';
                break;
            case 'email':
                modalTitle.textContent = '修改安全邮箱';
                modalInputNew.placeholder = '请输入新邮箱';
                modalInputNew.style.display = 'block';
                break;
            case 'coupon':
                modalTitle.textContent = '修改优惠类型';
                modalSelectCoupon.style.display = 'block';
                break;
        }

        modal.style.display = 'flex'; // 显示弹窗
    }

    // 关闭弹窗
    function closeModal() {
        const modal = document.getElementById('modal');
        modal.style.display = 'none';
    }

    // 提交表单
    function submitForm() {
        let newValue;

        if (currentType === 'coupon') {
            // 获取下拉框的值
            const modalSelectCoupon = document.getElementById('modal-select-coupon');
            newValue = modalSelectCoupon.value;
        } else {
            // 获取输入框的值
            newValue = document.getElementById('modal-input-new').value;
        }

        if (!newValue) {
            alert('请输入完整的信息');
            return;
        }

        // 获取用户ID
        let user = sessionStorage.getItem('user');
        if (!user) {
            alert('用户未登录');
            return;
        }
        const parsedUser = JSON.parse(user);
        const userId = parsedUser.userId;

        // 根据 currentType 构造请求参数
        let requestData = {
            userId: userId
        };

        switch (currentType) {
            case 'password':
                requestData.userPwd = newValue;
                break;
            case 'phone':
                requestData.userPhone = newValue;
                break;
            case 'email':
                requestData.userEmail = newValue;
                break;
            case 'coupon':
                requestData.userType = newValue;
                break;
        }

        $.ajax({
            url: 'user/update',
            type: 'put',
            contentType: 'application/json',
            data: JSON.stringify(
                requestData
            ),
            dataType: 'JSON',
            success: function(response) {
                console.log(response.data)
                if (response.code === 200) {
                    alert('修改成功！');
                    closeModal()
                } else {
                    alert('修改失败');
                }
            },
            error: function() {
                alert('请求失败，请稍后重试');
            }
        });

    }

</script>

</body>
</html>